<template>
  <div class="con">
    <div class="banxin">
      <ul class="tanxin lists">
        <li class="tanxin">
          <div class="box">
            <img src="../../assets//images/home/integral-01.png" alt="" />
            <p>签到得积分</p>
            <a href="javascript:;">去签到</a>
          </div>
          <div class="box">
            <img src="../../assets//images/home/integral-02.png" alt="" />
            <p>购课的积分</p>
             <a href="javascript:;">去购课</a>
          </div>
          <div class="box">
            <img src="../../assets//images/home/integral-03.png" alt="" />
            <p>推荐得积分</p>
             <a href="javascript:;">去推荐</a>
          </div>
          <div class="box">
            <img src="../../assets//images/home/integral-04.png" alt="" />
            <p>拼团得积分</p>
             <a href="javascript:;">去拼团</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base";
.con {
  margin-bottom: 40px;
  background: #fff;
  .box {
    width: 285px;
    height: 168px;
    margin-right: 20px;
    position: relative;
    overflow: hidden;
    &:last-of-type {
      margin-right: 0;
    }
    p{
        position: absolute;
        font-size: 30px;
        color: #fff;
        left: 20px;
        top: 40px;
    }
    a{
        border: 1px solid #fff ;
        padding: 5px 10px;
        text-decoration: none;
        color: #fff;
        position: absolute;
        left: 20px;
        top: 80px;
    }
    img{
      transition: .2s linear;
    }
    img:hover{
      transform: scale(1.05);
    }
  }
}
</style>